import React, { Component } from 'react'
import { Button, message, Spin, Table } from "antd"
import { RootState } from '../../../../../reducers/index'
import { connect, ConnectedProps } from 'react-redux'
import ButtonGroup from 'antd/lib/button/button-group'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import ArticleInfo from "../../../../../types/ArticleInfo";
import { listDeletedArticleInfo, queryDeletedArticleAmount } from "../../../../../requests/article";
import moment from 'moment'
import ArticleType from '../../../../../types/ArticleType'
import recoverArticleModal from "./RecoverArticleModal";
import { getRes } from "../../../../../configFile";


interface PropsFromRedux extends ConnectedProps<typeof connector>, RouteComponentProps {
    articleType: ArticleType
}

interface IState {
    ArticleSource: Array<Pick<ArticleInfo,
        "articleID" | "articleType" | "title" | "authorID" | "creationTimestamp" | "lastModifiedTimestamp">
        &
    { key: number }>       //显示信息
    amount: number                                                          //总共条目
    offset: number                                                          //偏移量
    limit: number                                                           //条数
    isLoading: boolean                                                       //是否加载中
    modifyModalVisible: boolean,                                             //编辑的模态框是否为显示状态
}

export class DeletedArticleList extends Component<PropsFromRedux, IState> {
    constructor(props: PropsFromRedux) {
        super(props)
        this.state = {
            ArticleSource: [],
            amount: 0,
            offset: 0,
            limit: 10,
            isLoading: true,
            modifyModalVisible: false
        }
    }


    //恢复文章
    recoverArticle = (articleID: number, title: string, refresh: () => void) => {
        recoverArticleModal(articleID, title, refresh)
    }


    //获取文章数据
    getArticle = async () => {
        try {
            this.setState({
                ...this.state,
                isLoading: true
            })
            const amountRes = getRes(await queryDeletedArticleAmount(this.props.articleType))
            const res = getRes(await listDeletedArticleInfo(this.props.articleType, this.state.offset, this.state.limit))
            if (amountRes.isSuccessful === false) {
                message.error(amountRes.message)
                return;
            }
            if (res.isSuccessful === false) {
                message.error(res.message)
                return;
            }
            this.setState({
                ArticleSource: res.data.map(
                    (item: Pick<ArticleInfo, "articleID" | "articleType" | "title" | "authorID" | "creationTimestamp" | "lastModifiedTimestamp">) =>
                        Object.assign({}, item, { key: item.articleID })),
                amount: amountRes.data
            })
        }
        catch (error) {
            message.error(error.toString())
        }
        finally {
            this.setState({
                ...this.state,
                isLoading: false
            })
        }
    }

    componentDidMount() {
        this.getArticle()
    }

    columns = [{
        title: '文章标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '文章创建时间',
        dataIndex: 'creationTimestamp',
        key: 'creationTimestamp',
        render: (record: number) => {
            return moment(record).format('YYYY-MM-DD')
        }
    },

    {
        title: '操作',
        key: 'action',
        render: (record: ArticleInfo) => (
            <ButtonGroup>
                <Button size='middle' type="primary" onClick={this.recoverArticle.bind(this, record.articleID, record.title, this.getArticle)}>恢复</Button>
            </ButtonGroup>
        )
    }]

    render() {
        return (
            <div>
                <Spin spinning={this.state.isLoading}>
                    <Table columns={this.columns}
                        dataSource={this.state.ArticleSource}
                        pagination={{
                            onChange: (page, pageSize) => {
                                console.log(page, pageSize);
                                if (!!pageSize) {
                                    this.setState({
                                        offset: (page - 1) * (pageSize),
                                        limit: (pageSize)
                                    }, () => {
                                        this.getArticle()
                                    })
                                } else {
                                    console.error('pageSize == undefined')
                                }
                            },
                            defaultPageSize: this.state.limit,
                            total: this.state.amount,
                            showSizeChanger: false
                        }} />
                </Spin>

            </div>
        )
    }
}

//connect加入props
const mapStateToProps = (state: RootState) => {
    return {
        userID: state.loginReducers.userID
    }
}

const connector = connect(mapStateToProps)
export default withRouter(connector(DeletedArticleList))